<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的课程 - 教学管理系统</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            background-color: #f5f5f5;
            margin: 0;
            padding: 0;
        }

        .container {
            display: flex;
            min-height: 100vh;
        }

        .sidebar {
            width: 250px;
            background-color: #2c3e50;
            color: white;
            padding-top: 20px;
        }

        .sidebar-header {
            padding: 0 20px 20px;
            border-bottom: 1px solid #3c5166;
        }

        .sidebar-header h2 {
            margin: 0;
            font-size: 20px;
        }

        .user-info {
            margin-top: 10px;
            font-size: 14px;
            opacity: 0.8;
        }

        .menu {
            list-style: none;
            padding: 0;
            margin: 20px 0;
        }

        .menu li {
            padding: 12px 20px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .menu li:hover {
            background-color: #3c5166;
        }

        .menu li.active {
            background-color: #3498db;
        }

        .menu a {
            color: white;
            text-decoration: none;
            display: block;
        }

        .content {
            flex: 1;
            padding: 20px;
        }

        .content-header {
            margin-bottom: 30px;
        }

        .content-header h1 {
            margin: 0;
            color: #333;
            font-size: 24px;
        }

        .search-box {
            margin-bottom: 20px;
        }

        .search-box input {
            width: 300px;
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }

        .search-box button {
            padding: 8px 16px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-left: 8px;
        }

        .course-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .course-card {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            transition: transform 0.3s;
        }

        .course-card:hover {
            transform: translateY(-5px);
        }

        .course-header {
            background-color: #3498db;
            color: white;
            padding: 15px;
        }

        .course-header h2 {
            margin: 0;
            font-size: 18px;
        }

        .course-id {
            font-size: 14px;
            opacity: 0.8;
            margin-top: 5px;
        }

        .course-body {
            padding: 15px;
        }

        .course-info {
            list-style: none;
            padding: 0;
            margin: 0 0 15px 0;
        }

        .course-info li {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
            color: #555;
            font-size: 14px;
        }

        .course-info .label {
            color: #888;
        }

        .course-info .value {
            font-weight: 500;
            color: #333;
        }

        .course-actions {
            display: flex;
            justify-content: space-between;
            margin-top: 15px;
        }

        .course-btn {
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            border: none;
            color: white;
            background-color: #3498db;
            flex: 1;
            margin-right: 10px;
            text-align: center;
            text-decoration: none;
        }

        .course-btn:last-child {
            margin-right: 0;
        }

        .course-btn.students {
            background-color: #27ae60;
        }

        .course-btn.grades {
            background-color: #f39c12;
        }

        .course-btn:hover {
            opacity: 0.9;
        }

        .logout {
            margin-top: auto;
            padding: 20px;
        }

        .logout a {
            color: #e74c3c;
            text-decoration: none;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="sidebar">
            <div class="sidebar-header">
                <h2>教学管理系统</h2>
                <div class="user-info" th:if="${session.user}">
                    <span th:text="${session.user.username}">teacher1</span> - 教师
                </div>
            </div>
            <ul class="menu">
                <li><a href="/teacher/dashboard">我的概览</a></li>
                <li class="active"><a href="/teacher/courses">我的课程</a></li>
                <li><a href="/teacher/students">我的学生</a></li>
                <li><a href="/teacher/grades">成绩管理</a></li>
                <li><a href="/teacher/profile">个人信息</a></li>
            </ul>
            <div class="logout">
                <a href="/logout">退出登录</a>
            </div>
        </div>

        <div class="content">
            <div class="content-header">
                <h1>我的课程</h1>
            </div>

            <div class="search-box">
                <input type="text" id="searchInput" placeholder="搜索课程名称或编号">
                <button onclick="searchCourses()">搜索</button>
            </div>

            <div class="course-grid" id="courseGrid">
                <!-- 课程卡片将通过Thymeleaf动态生成 -->
                <div th:if="${courses == null || courses.isEmpty()}"
                    style="grid-column: 1 / -1; text-align: center; padding: 50px; background: white; border-radius: 8px;">
                    <p>暂无课程数据</p>
                </div>

                <div th:each="course : ${courses}" class="course-card">
                    <div class="course-header">
                        <h2 th:text="${course.name}">计算机导论</h2>
                        <div class="course-id" th:text="${course.courseId}">CS101</div>
                    </div>
                    <div class="course-body">
                        <ul class="course-info">
                            <li>
                                <span class="label">学分</span>
                                <span class="value" th:text="${course.credit}">4</span>
                            </li>
                            <li>
                                <span class="label">总学时</span>
                                <span class="value" th:text="${course.totalHours}">64</span>
                            </li>
                            <li>
                                <span class="label">开课学期</span>
                                <span class="value" th:text="${course.semester}">大一上</span>
                            </li>
                            <li>
                                <span class="label">教室</span>
                                <span class="value"
                                    th:text="${course.classroom != null ? course.classroom.building : '未分配'}">A101</span>
                            </li>
                            <li>
                                <span class="label">学生数</span>
                                <span class="value"
                                    th:text="${course.studentCount != null ? course.studentCount : '0'}">20</span>
                            </li>
                        </ul>
                        <div class="course-actions">
                            <a th:href="@{'/teacher/course/' + ${course.courseId}}" class="course-btn">详情</a>
                            <a th:href="@{'/teacher/course/' + ${course.courseId} + '/edit'}"
                                class="course-btn students">编辑</a>
                            <button
                                th:attr="onclick='confirmDelete(\'' + ${course.courseId} + '\',\'' + ${course.name} + '\')'"
                                class="course-btn grades">删除</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            console.log('教师课程页面加载完成');

            // 检查是否有删除成功的消息
            if (window.location.search.includes('deleted=1')) {
                alert('课程已成功删除！');
            }
        });

        // 搜索课程
        function searchCourses() {
            const searchTerm = document.getElementById('searchInput').value.trim().toLowerCase();
            console.log('搜索课程:', searchTerm);

            const courseCards = document.querySelectorAll('.course-card');
            let matchCount = 0;

            courseCards.forEach(card => {
                const courseName = card.querySelector('.course-header h2').textContent.toLowerCase();
                const courseId = card.querySelector('.course-id').textContent.toLowerCase();

                if (courseName.includes(searchTerm) || courseId.includes(searchTerm) || searchTerm === '') {
                    card.style.display = 'block';
                    matchCount++;
                } else {
                    card.style.display = 'none';
                }
            });

            // 显示搜索结果为空的提示
            const emptyMessage = document.querySelector('#courseGrid > div[style*="grid-column"]');
            if (emptyMessage) {
                if (matchCount === 0 && courseCards.length > 0) {
                    emptyMessage.style.display = 'block';
                    emptyMessage.querySelector('p').textContent = '未找到匹配的课程';
                } else {
                    emptyMessage.style.display = 'none';
                }
            }
        }

        // 确认删除课程
        function confirmDelete(courseId, courseName) {
            if (confirm('您确定要删除课程 "' + courseName + '" 吗？此操作不可撤销。')) {
                // 创建表单并提交
                const form = document.createElement('form');
                form.method = 'POST';
                form.action = '/teacher/course/' + courseId + '/delete';
                document.body.appendChild(form);
                form.submit();
            }
        }
    </script>
</body>

</html>